
<!-- saved from url=(0054)http://thinkspace.zhanghong.com/Color/Index/index.html -->
<html class="csstransforms csstransforms3d csstransitions"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> -->
<script type="text/javascript" src="./index_files/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./index_files/bootstrap-3.3.5.min.js"></script>
<script type="text/javascript" src="./index_files/main.min.js"></script>
<script type="text/javascript" src="./index_files/plugins.min.js"></script>
<script src="./index_files/jquery.page.js"></script>
<script type="text/javascript" src="./index_files/swiper.min.js"></script>
<link href="./index_files/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- <link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css" rel="stylesheet" type="text/css"> -->
<link href="./index_files/bootstrap-3.3.5.min.css" rel="stylesheet" type="text/css">
<link href="./index_files/swiper.min.css" rel="stylesheet" type="text/css">

<link href="./index_files/style.css" rel="stylesheet" type="text/css">
</head>
<body>

  <div class="pob-bg" style="height: 4172px; display: none;"></div>

  <div class="menu-link-fixed hidden-sm hidden-xs">
    <img src="./index_files/menu_link.png" class="img-responsive menu-link" usemap="#map1488285849">
    <map id="map" name="map1488285849">
    <area shape="rect" coords="51,8,136,95" title="" href="http://thinkspace.zhanghong.com/Color/Index/index.html#school" style="outline: none">
    <area shape="rect" coords="114,97,249,219" title="" href="http://thinkspace.zhanghong.com/Color/Index/index.html#art" style="outline: none">
    <area shape="rect" coords="45,215,134,303" title="" href="http://thinkspace.zhanghong.com/Color/Index/index.html#aid" style="outline: none">
    <area shape="rect" coords="139,289,214,357" title="" href="http://thinkspace.zhanghong.com/Color/Index/index.html" style="outline: none">
</map>
  </div>

  <ul class="menu-nav hide">
    <a href="http://thinkspace.zhanghong.com/Color/Index/index#school"><img src="./index_files/nav1.png"></a>
    <a href="http://thinkspace.zhanghong.com/Color/Index/index#art"><img src="./index_files/nav2.png"></a>
    <a href="http://thinkspace.zhanghong.com/Color/Index/index#aid"><img src="./index_files/nav3.png"></a>
    <a href="http://thinkspace.zhanghong.com/Color/Index/index.html"><img src="./index_files/nav4.png"></a>
  </ul>

  <div class="section kv">
    <div class="container">
      <div class="row">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://thinkspace.zhanghong.com/Color/Index/index.html">
            <span><img src="./index_files/logo.png" class="img-responsive"></span>
          </a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-ex-collapse">
          <ul class="nav navbar-nav navbar-right">
             <li>
              <a href="http://thinkspace.zhanghong.com/Color/Index/index.html" class="hidden-xs"><img src="./index_files/index_link.png" class="img-responsive"></a>
            </li>
            <li>
              <a href="http://thinkspace.zhanghong.com/Color/Index/index.html#" class="menu"><img src="./index_files/menu.png" class="img-responsive"></a>
            </li>
            <li>
              <a href="http://weibo.com/weiaishangse" class="hidden-xs"><img src="./index_files/weibo.png" class="img-responsive"></a>
            </li>
            <li class="wechat">
              <a href="http://thinkspace.zhanghong.com/Color/Index/index.html#" class="hidden-xs"><img src="./index_files/wechat.png" class="img-responsive"></a>
              <img src="./index_files/code_right.png" class="code-right">
            </li>
          </ul>
        </div>
        <div class="col-md-12 index-logo-bottom">
          <div id="carousel-example" data-interval="false" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
              <div class="item active">
                <img src="./index_files/kv_write.png" class="img-responsive kv-write">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section index-art-title" id="art">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <img src="./index_files/index_art_title_content.png" class="img-responsive">
        </div>
      </div>
    </div>
  </div>

  <div class="section art">

    <div class="container">
      <!-- 艺术家浮层 -->
      <div class="hide-box" style="display: none;">
        <div class="clone">
          <img src="./index_files/clone.png">
        </div>
        <div class="container index-video-box">
          <div class="row">
            <div class="col-md-12 index-video index-video-hide">
              <div>
                <img src="./index_files/hide_box_star.png" class="hide-box-star">
                <img src="./index_files/detail_icon.png" class="man-icon">
              </div>
              <div class="swiper-container gallery-top2 swiper-container-horizontal">
                <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
                  <div class="swiper-slide swiper-slide-active" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-8 index-videoL">
                        <div>
                          <img src="./index_files/video_title_left.png" class="img-responsive video-title-left">
                        </div>
                        <div class="video-box-hide">
                          <video id="example_video_1" class="video-js vjs-default-skin video-num1" controls="" preload="none" poster="/Public/color/img/hide-video-pic.jpg" data-setup="{}">
                            <source src="/Public/color/video/3.mp4" type="video/mp4">
                          </video>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div>
                          <img src="./index_files/video_title_right.png" class="img-responsive video-title-right">
                        </div>
                        <div>
                          <div class="hide-video-title">《尽情游戏》</div>
                          <img src="./index_files/name.png" class="img-responsive">
                          <div class="hide-video-title2">学校彩绘第十一站</div>
                          <div class="hide-vidoe-title3">@湖南吉首市太平学校</div>
                          <div class="hide-vidoe-content">
                            <p>中秋刚过，秋天的气息愈发浓厚。伴随着微凉的秋意，立邦「为爱上色」艺术+携手智利艺术家INTI来到了湖南吉首太平希望学校，为当地的孩子们创作了一幅宽8米，高20米，总面积达160平方米的巨型墙绘，献上了一份独具南美风情的开学大礼。</p>
                            <p>此次受邀创作的智利艺术家中秋刚过，秋天的气息愈发浓厚。伴随着微凉的秋意，立邦「为爱上色」艺术+携手智利艺术家INTI来到了湖南吉首太平希望学校，为当地的孩子们创作了一幅宽8米，高20米，总面积达160平方米的巨型墙绘，献上了一份独具南美风情的开学大礼。</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide swiper-slide-next" style="width: 894px; margin-right: 10px;">
                    <img src="./index_files/art_pic_big3.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-8 index-videoL">
                        <div>
                          <img src="./index_files/video_title_left.png" class="img-responsive video-title-left">
                        </div>
                        <div class="video-box-hide">
                          <video id="example_video_1" class="video-js vjs-default-skin video-num3" controls="" preload="none" poster="/Public/color/img/hide-video-pic.jpg" data-setup="{}">
                            <source src="/Public/color/video/3.mp4" type="video/mp4">
                          </video>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div>
                          <img src="./index_files/video_title_right.png" class="img-responsive video-title-right">
                        </div>
                        <div>
                          <div class="hide-video-title">《尽情游戏》</div>
                          <img src="./index_files/name.png" class="img-responsive">
                          <div class="hide-video-title2">学校彩绘第十一站</div>
                          <div class="hide-vidoe-title3">@湖南吉首市太平学校</div>
                          <div class="hide-vidoe-content">
                            <p>中秋刚过，秋天的气息愈发浓厚。伴随着微凉的秋意，立邦「为爱上色」艺术+携手智利艺术家INTI来到了湖南吉首太平希望学校，为当地的孩子们创作了一幅宽8米，高20米，总面积达160平方米的巨型墙绘，献上了一份独具南美风情的开学大礼。</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <img src="./index_files/art_pic_big4.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <img src="./index_files/art_pic_big5.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <img src="./index_files/art_pic_big6.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <img src="./index_files/art_pic_big7.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <img src="./index_files/art_pic_big8.jpg" class="img-responsive">
                  </div>
                </div>
                <!-- Add Arrows -->
              </div>
            </div>

            <div class="col-md-12 index-video-pic">
              <div class="swiper-button-next swiper-button-next1"></div>
              <div class="swiper-container gallery-thumbs2 swiper-container-horizontal" style="cursor: -webkit-grab;">
                <div class="swiper-wrapper" style="transform: translate3d(335px, 0px, 0px); transition-duration: 0ms;">
                  <div class="swiper-slide swiper-slide-active" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small.png" class="img-responsive">
                  </div>
                  <div class="swiper-slide swiper-slide-next" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.png" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small2.png" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small4.png" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small5.png" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small6.png" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small7.png" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small8.png" class="img-responsive">
                  </div>
                </div>
              </div>
              <div class="swiper-button-prev swiper-button-prev1 swiper-button-disabled"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="row art-index-video">
        <div class="col-md-12 index-video">
          <div class="swiper-button-next swiper-button-next1"></div>
          <div class="swiper-container gallery-top swiper-container-horizontal">
            <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
              <div class="swiper-slide swiper-slide-active" style="width: 840px; margin-right: 10px;">
                <div class="row">
                  <div class="col-md-6 index-videoL index-video-gray">
                    <a href="http://thinkspace.zhanghong.com/Color/Index/art.html"><img src="./index_files/art_pic_big.png" class="img-responsive"></a>
                  </div>
                  <div class="col-md-6">
                    <div>
                    <span class="index-video-title">《尽情游戏》</span><img src="./index_files/name.png">
                    </div>
                    <p style="font-size: 14px; color:#222; font-weight: bold; height: 25px; line-height: 25px"><img src="./index_files/address_icon.png">湖南吉首市太平学校</p>
                    <p style="font-size: 14px; color:#222; font-weight: bold; padding-left: 25px ">由智利著名墙绘艺术家INTI绘制</p>
                    <p style="font-size: 18px; padding-left: 25px">我选择了狂欢中的小丑形象，来营造欢乐的氛围，和年轻的朋友们互动。希望运用...</p>
                    <div class="video" itemvalue="video-num1">
                      <img src="./index_files/index_video_pic.jpg">
                      <!-- <video id="example_video_1"  class="video-js vjs-default-skin" controls preload="none" poster="/Public/color/img/index_video_pic.jpg" data-setup="{}">
                        <source src="/Public/color/video/3.mp4" type='video/mp4' />
                      </video> -->
                      <img src="./index_files/player.png" class="index-player">
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide swiper-slide-next" style="width: 840px; margin-right: 10px;">
                <img src="./index_files/art_pic_big3.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" style="width: 840px; margin-right: 10px;">
                <div class="row">
                  <div class="col-md-6 index-videoL index-video-gray">
                    <a href="http://thinkspace.zhanghong.com/Color/Index/art.html"><img src="./index_files/art_pic_big.png" class="img-responsive"></a>
                  </div>
                  <div class="col-md-6">
                    <div>
                    <span class="index-video-title">《尽情游戏》</span><img src="./index_files/name.png">
                    </div>
                    <p style="font-size: 14px; color:#222; font-weight: bold; height: 25px; line-height: 25px"><img src="./index_files/address_icon.png">湖南吉首市太平学校</p>
                    <p style="font-size: 14px; color:#222; font-weight: bold; padding-left: 25px ">由智利著名墙绘艺术家INTI绘制</p>
                    <p style="font-size: 18px; padding-left: 25px">我选择了狂欢中的小丑形象，来营造欢乐的氛围，和年轻的朋友们互动。希望运用...</p>
                    <div class="video" itemvalue="video-num3">
                      <img src="./index_files/index_video_pic.jpg">
                      <!-- <video id="example_video_1"  class="video-js vjs-default-skin" controls preload="none" poster="/Public/color/img/index_video_pic.jpg" data-setup="{}">
                        <source src="/Public/color/video/3.mp4" type='video/mp4' />
                      </video> -->
                      <img src="./index_files/player.png" class="index-player">
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide" style="width: 840px; margin-right: 10px;">
                <img src="./index_files/art_pic_big4.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" style="width: 840px; margin-right: 10px;">
                <img src="./index_files/art_pic_big5.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" style="width: 840px; margin-right: 10px;">
                <img src="./index_files/art_pic_big6.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" style="width: 840px; margin-right: 10px;">
                <img src="./index_files/art_pic_big7.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" style="width: 840px; margin-right: 10px;">
                <img src="./index_files/art_pic_big8.jpg" class="img-responsive">
              </div>
            </div>
            <!-- Add Arrows -->
          </div>
          <div class="swiper-button-prev swiper-button-prev1 swiper-button-disabled"></div>
        </div>

        <div class="icon icon1">
          <img src="./index_files/index_art_icon1.png">
        </div>

        <div class="col-md-12 index-video-pic">
          <div class="swiper-button-next swiper-button-next1"></div>
          <div class="swiper-container gallery-thumbs swiper-container-horizontal" style="cursor: -webkit-grab;">
            <div class="swiper-wrapper" style="transform: translate3d(362.5px, 0px, 0px); transition-duration: 0ms;">
              <div class="swiper-slide swiper-slide-active" style="width: 135px; margin-right: 10px;">
                <img src="./index_files/video_pic_small.png" class="img-responsive">
              </div>
              <div class="swiper-slide swiper-slide-next" style="width: 135px; margin-right: 10px;">
                <img src="./index_files/video_pic_small2.png" class="img-responsive">
              </div>
              <div class="swiper-slide" style="width: 135px; margin-right: 10px;">
                <img src="./index_files/video_pic_small3.png" class="img-responsive">
              </div>
              <div class="swiper-slide" style="width: 135px; margin-right: 10px;">
                <img src="./index_files/video_pic_small4.png" class="img-responsive">
              </div>
              <div class="swiper-slide" style="width: 135px; margin-right: 10px;">
                <img src="./index_files/video_pic_small5.png" class="img-responsive">
              </div>
              <div class="swiper-slide" style="width: 135px; margin-right: 10px;">
                <img src="./index_files/video_pic_small6.png" class="img-responsive">
              </div>
              <div class="swiper-slide" style="width: 135px; margin-right: 10px;">
                <img src="./index_files/video_pic_small7.png" class="img-responsive">
              </div>
              <div class="swiper-slide" style="width: 135px; margin-right: 10px;">
                <img src="./index_files/video_pic_small8.png" class="img-responsive">
              </div>
            </div>
          </div>
          <div class="swiper-button-prev swiper-button-prev1 swiper-button-disabled"></div>
        </div>
      </div>

    </div>
  </div>

  <div class="section index-color-title" id="school">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <img src="./index_files/index_color_title_content.png" class="img-responsive">
        </div>
      </div>
    </div>
  </div>

  <div class="section school">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-9 index-school-write">
          2009年，立邦CSR开启「为爱上色」计划，开始为中国偏远地区的学童，美化、改善校园学习环境。至2016年，「为爱上色」已覆盖中国百余个城市、乡镇，完成超过263所美化校园工程，让超过8万名儿童拥有彩色校园和快乐童年。
        </div>
        <div class="col-xs-12 col-sm-12 col-md-3 text-center" style=" height: 100px; padding: 30px 0">
          <a href="http://thinkspace.zhanghong.com/Color/Index/school.html"><img src="./index_files/school_color_button.png"></a>
        </div>
        <div style="margin-left: 60%" class="icon">
          <img src="./index_files/star.png">
        </div>
        <div class="row" style="position: relative;">
          <div class="col-md-4 col-xs-12 col-sm-12 school-right">
            <div class="row">
              <div class="col-md-12 col-xs-12 col-sm-12 index-school-title">
                <div>贵州黔南布依族苗族治州龙里县平坡小学</div>
              </div>
              <div class="col-md-12 col-sm-6 col-xs-6">
                <img src="./index_files/school_title_pic1.png" class="img-responsive">
              </div>
              <div class="col-md-12 col-sm-6 col-xs-6">
                <img src="./index_files/school_title_pic2.png" class="img-responsive">
              </div>
            </div>
          </div>
          <div class="col-md-4 col-xs-12 col-sm-12 school-right">
            <div class="row">
              <div class="col-md-12 col-xs-12 col-sm-12 index-school-title">
                <div>黑龙江哇哈哈希望小学</div>
              </div>
              <div class="col-md-12 col-sm-6 col-xs-6">
                <img src="./index_files/school_title2_pic1.png" class="img-responsive">
              </div>
              <div class="col-md-12 col-sm-6 col-xs-6">
                <img src="./index_files/school_title2_pic2.png" class="img-responsive">
              </div>
            </div>
          </div>
          <div class="col-md-4 col-xs-12 col-sm-12 school-right">
            <div class="row">
              <div class="col-md-12 col-xs-12 col-sm-12 index-school-title">
                <div>四川凉山州昭觉县逸夫小学</div>
              </div>
              <div class="col-md-12 col-sm-6 col-xs-6">
                <img src="./index_files/school_title3_pic1.png" class="img-responsive">
              </div>
              <div class="col-md-12 col-sm-6 col-xs-6">
                <img src="./index_files/school_title3_pic2.png" class="img-responsive">
              </div>
            </div>
          </div>
          <div class="icon" style=" position: absolute; left:65%; bottom:40%">
            <img src="./index_files/index_color_icon1.png">
          </div>
        </div>

      </div>
    </div>
  </div>

  <div class="section index-aid-title" id="aid">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <img src="./index_files/index_aid_title_content.png" class="img-responsive">
        </div>
      </div>
    </div>
  </div>

  <div class="section aid">
    <div class="container">
      <!-- 支教视频浮层 -->
      <div class="hide-box2" style="display: none;">
        <div class="clone">
          <img src="./index_files/clone.png">
        </div>
        <div class="container index-video-box">
          <div class="row">
            <div class="col-md-12 index-video">
              <div class="index-videoL">
                  <img src="./index_files/tab_video_title.png" class="img-responsive video-title-left">
              </div>
              <div class="swiper-container gallery-top3 swiper-container-horizontal">
                <div class="swiper-wrapper">
                  <div class="swiper-slide swiper-slide-active" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide swiper-slide-next" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin video-nums5" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" poster="/Public/color/img/video_pic.jpg" data-setup="{}">
                          <source src="/Public/color/video/3.mp4" type="video/mp4">
                        </video>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Add Arrows -->
              </div>
            </div>

            <div class="col-md-12 index-video-pic index-video-pic2">
              <div class="swiper-button-next swiper-button-next3"></div>
              <div class="swiper-container gallery-thumbs3 swiper-container-horizontal" style="cursor: -webkit-grab;">
                <div class="swiper-wrapper" style="transform: translate3d(335px, 0px, 0px); transition-duration: 0ms;">
                  <div class="swiper-slide swiper-slide-active" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide swiper-slide-next" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                </div>
              </div>
              <div class="swiper-button-prev swiper-button-prev3 swiper-button-disabled"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 支教照片浮层 -->
      <div class="hide-box3" style="display: none;">
        <div class="clone">
          <img src="./index_files/clone.png">
        </div>
        <div class="container index-video-box">
          <div class="row">
            <div class="col-md-12 index-video">
              <div class="index-videoL">
                <img src="./index_files/tab_pic_title.png" class="img-responsive video-title-left">
              </div>
              <div class="swiper-container gallery-top4 swiper-container-horizontal">
                <div class="swiper-wrapper">
                  <div class="swiper-slide swiper-slide-active" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <div><img src="./index_files/video_pic.jpg" class="img-responsive"></div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide swiper-slide-next" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <div><img src="./index_files/video_pic.jpg" class="img-responsive"></div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <div><img src="./index_files/video_pic.jpg" class="img-responsive"></div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <div><img src="./index_files/video_pic.jpg" class="img-responsive"></div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <div><img src="./index_files/video_pic.jpg" class="img-responsive"></div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <div><img src="./index_files/video_pic.jpg" class="img-responsive"></div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <div><img src="./index_files/video_pic.jpg" class="img-responsive"></div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" style="width: 894px; margin-right: 10px;">
                    <div class="row">
                      <div class="col-md-12 index-videoL">
                        <div><img src="./index_files/video_pic.jpg" class="img-responsive"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Add Arrows -->
              </div>
            </div>

            <div class="col-md-12 index-video-pic index-video-pic2">
              <div class="swiper-button-next swiper-button-next4"></div>
              <div class="swiper-container gallery-thumbs4 swiper-container-horizontal" style="cursor: -webkit-grab;">
                <div class="swiper-wrapper" style="transform: translate3d(335px, 0px, 0px); transition-duration: 0ms;">
                  <div class="swiper-slide swiper-slide-active" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide swiper-slide-next" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                  <div class="swiper-slide" style="width: 124px; margin-right: 10px;">
                    <img src="./index_files/video_pic_small3.jpg" class="img-responsive">
                  </div>
                </div>
              </div>
              <div class="swiper-button-prev swiper-button-prev4 swiper-button-disabled"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 col-sm-12 col-xs-12">
          <img src="./index_files/aid_pic_big.png" class="img-responsive" style="width: 100%">
          <div style="line-height: 35px; font-size: 16px; padding: 15px 0">
            <p style="text-indent: 2em">2012年，立邦启动「为爱上色·爱美术」高校志愿者美术支教活动。至今，已有广州美院、清华大学美术学院、上海大学美术学院、重庆大学和中国人民大学艺术学院等120多名老师和同学们参与，组织暑期美术支教活动11次，为数千名名孩子带去快乐美术，播撒下美术的种子。</p>
            <p style="text-indent: 2em; font-weight: bold;">2017年，我们将开展“立邦「为爱上色」中国大学生农村支教奖”，希望将农村支教项目发展成为一个全国大学生都可以参与的开放式平台，鼓励大学生们投身农村支教与实践。</p>
            <p style=" text-indent: 2em">也许，一句话，一首歌，一支笔，一个暑假，一段时光，就可以改变一个大学生和一群小朋友的未来。</p>
          </div>
          <a href="javascript:vold(0);"><img src="./index_files/aid_button.png" class="img-responsive" style="width:auto; margin:0 auto"></a>
        </div>
        <div class="col-md-6 col-sm-12 col-xs-12">
          <div><img src="./index_files/aid_pic_title.png" class="img-responsive aid-title"></div>
          <div class="swiper-container swiper-container-tab tab-pic swiper-container-horizontal swiper-container-multirow">
            <div class="swiper-wrapper" style="width: 1920px; transform: translate3d(-1440px, 0px, 0px); transition-duration: 0ms;">
              <div class="swiper-slide" data-swiper-column="0" data-swiper-row="0" style="order: 0; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" data-swiper-column="0" data-swiper-row="1" style="-webkit-box-ordinal-group: 8; order: 8; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic3.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" data-swiper-column="1" data-swiper-row="0" style="-webkit-box-ordinal-group: 1; order: 1; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic2.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" data-swiper-column="1" data-swiper-row="1" style="-webkit-box-ordinal-group: 9; order: 9; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic4.jpg" class="img-responsive">
              </div>

              <div class="swiper-slide" data-swiper-column="2" data-swiper-row="0" style="-webkit-box-ordinal-group: 2; order: 2; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide swiper-slide-prev" data-swiper-column="2" data-swiper-row="1" style="-webkit-box-ordinal-group: 10; order: 10; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic3.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide swiper-slide-active" data-swiper-column="3" data-swiper-row="0" style="-webkit-box-ordinal-group: 3; order: 3; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic2.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide swiper-slide-next" data-swiper-column="3" data-swiper-row="1" style="-webkit-box-ordinal-group: 11; order: 11; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic4.jpg" class="img-responsive">
              </div>

              <div class="swiper-slide" data-swiper-column="4" data-swiper-row="0" style="-webkit-box-ordinal-group: 4; order: 4; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" data-swiper-column="4" data-swiper-row="1" style="-webkit-box-ordinal-group: 12; order: 12; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic3.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" data-swiper-column="5" data-swiper-row="0" style="-webkit-box-ordinal-group: 5; order: 5; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic2.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" data-swiper-column="5" data-swiper-row="1" style="-webkit-box-ordinal-group: 13; order: 13; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic4.jpg" class="img-responsive">
              </div>

              <div class="swiper-slide" data-swiper-column="6" data-swiper-row="0" style="-webkit-box-ordinal-group: 6; order: 6; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" data-swiper-column="6" data-swiper-row="1" style="-webkit-box-ordinal-group: 14; order: 14; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic3.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" data-swiper-column="7" data-swiper-row="0" style="-webkit-box-ordinal-group: 7; order: 7; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic2.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" data-swiper-column="7" data-swiper-row="1" style="-webkit-box-ordinal-group: 15; order: 15; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/tab_pic4.jpg" class="img-responsive">
              </div>
            </div>
            <!-- Add Pagination -->
            <fieldset class="fwryxq-title">
              <legend class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets" align="center"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span></legend>
            </fieldset>
          </div>

          <div><img src="./index_files/aid_video_title.png" class="img-responsive aid-title"></div>
          <div class="swiper-container swiper-container-tab tab-video swiper-container-horizontal swiper-container-multirow">
            <div class="swiper-wrapper" style="width: 1920px; transform: translate3d(-1440px, 0px, 0px); transition-duration: 0ms;">
              <div class="swiper-slide" itemvalue="video-nums1" data-swiper-column="0" data-swiper-row="0" style="order: 0; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" itemvalue="video-nums2" data-swiper-column="0" data-swiper-row="1" style="-webkit-box-ordinal-group: 8; order: 8; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video3.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" itemvalue="video-nums3" data-swiper-column="1" data-swiper-row="0" style="-webkit-box-ordinal-group: 1; order: 1; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video2.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" itemvalue="video-nums4" data-swiper-column="1" data-swiper-row="1" style="-webkit-box-ordinal-group: 9; order: 9; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video4.jpg" class="img-responsive">
              </div>

              <div class="swiper-slide" itemvalue="video-nums5" data-swiper-column="2" data-swiper-row="0" style="-webkit-box-ordinal-group: 2; order: 2; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide swiper-slide-prev" itemvalue="video-nums6" data-swiper-column="2" data-swiper-row="1" style="-webkit-box-ordinal-group: 10; order: 10; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video3.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide swiper-slide-active" itemvalue="video-nums7" data-swiper-column="3" data-swiper-row="0" style="-webkit-box-ordinal-group: 3; order: 3; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video2.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide swiper-slide-next" itemvalue="video-nums8" data-swiper-column="3" data-swiper-row="1" style="-webkit-box-ordinal-group: 11; order: 11; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video4.jpg" class="img-responsive">
              </div>

              <div class="swiper-slide" itemvalue="video-nums9" data-swiper-column="4" data-swiper-row="0" style="-webkit-box-ordinal-group: 4; order: 4; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" itemvalue="video-nums10" data-swiper-column="4" data-swiper-row="1" style="-webkit-box-ordinal-group: 12; order: 12; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video3.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" itemvalue="video-nums11" data-swiper-column="5" data-swiper-row="0" style="-webkit-box-ordinal-group: 5; order: 5; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video2.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" itemvalue="video-nums12" data-swiper-column="5" data-swiper-row="1" style="-webkit-box-ordinal-group: 13; order: 13; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video4.jpg" class="img-responsive">
              </div>

              <div class="swiper-slide" itemvalue="video-nums13" data-swiper-column="6" data-swiper-row="0" style="-webkit-box-ordinal-group: 6; order: 6; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" itemvalue="video-nums14" data-swiper-column="6" data-swiper-row="1" style="-webkit-box-ordinal-group: 14; order: 14; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video3.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" itemvalue="video-nums15" data-swiper-column="7" data-swiper-row="0" style="-webkit-box-ordinal-group: 7; order: 7; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video2.jpg" class="img-responsive">
              </div>
              <div class="swiper-slide" itemvalue="video-nums16" data-swiper-column="7" data-swiper-row="1" style="-webkit-box-ordinal-group: 15; order: 15; margin-top: 30px; width: 210px; margin-right: 30px;">
                <img src="./index_files/player.png" class="img-responsive player">
                <img src="./index_files/tab_video4.jpg" class="img-responsive">
              </div>
            </div>
            <!-- Add Pagination -->
            <fieldset class="fwryxq-title">
              <legend class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets" align="center"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span></legend>
            </fieldset>
          </div>

        </div>
      </div>

    </div>
  </div>

  <div class="section index-footer footer">
    <div class="container">
      <div class="row footer-content-bg">
        <div class="cat">
          <img src="./index_files/cat.png" class="img-responsive">
        </div>
        <div class="visible-sm visible-xs tree">
          <img src="./index_files/footer_bg.png" class="img-responsive">
        </div>
        <div class="col-md-12 text-center footer-content">
          <ul>
            <a href="javascript:void(0);">网站声明</a>
            <a href="javascript:void(0);">关于我们</a>
            <a href="javascript:void(0);">联系我们</a>
          </ul>
          <h2>800-810-1687</h2>
          <p>Copyright © 2017 Nipponpaint. All rights reserved</p>
        </div>
      </div>
    </div>
  </div>

  <div class="section">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-12 text-center hidden-xs">
          <img src="./index_files/index_footer.png" class="img-responsive">
        </div>
        <div class="col-xs-12 text-center visible-xs">
          <img src="./index_files/index_footer_wap.png" class="img-responsive">
        </div>
      </div>
    </div>
  </div>
  <script>
    $(window).load(function () {
      var h_body = $("body").height();
      $(".pob-bg").css("height", h_body)
    });

	  $(function(){
      // 微信图标显示与隐藏
      $(".wechat").on("mouseover mouseout",function(){
        $(this).find(".code-right").toggle();
      })

      $(".hide-box").css("display","none");
      $(".hide-box2").css("display","none");
      $(".hide-box3").css("display","none");

			$(".menu").click(function(){
        if($(".menu-nav").hasClass("hide")){
          $(".menu img").attr("src","/Public/color/img/menu_click.png");
          $(".menu").css("z-index","20");
          $(".menu-nav").removeClass("hide");
          $(".pob-bg").css("display","block");
        }else{
          $(".menu img").attr("src","/Public/color/img/menu.png");
          $(".menu").css("z-index","1");
          $(".menu-nav").addClass("hide");
        $(".pob-bg").css("display","none");
        }
      })

      // 艺术家浮层
      $(".index-video .video").click(function(){
        var videoval=$(this).attr("itemvalue");
        var thisvideo = $('.'+videoval);
        thisvideo [0].play();
        if($(window).width()>768){
          $(".hide-box").css("display","block");
          $(".pob-bg").css("display","block");
        }
        else{
          $(".hide-box").css("display","none");
          $(".pob-bg").css("display","none");
        }
      })

      $(".hide-box .clone").click(function(){
        $(".hide-box").css("display","none");
        $(".pob-bg").css("display","none");
        $('video').trigger('pause');
      })


      // 支教视频
      $(".tab-video .swiper-slide").click(function(){
        if($(window).width()>768){
          $(".hide-box2").css("display","block");
          $(".pob-bg").css("display","block");}
        else{
          $(".hide-box2").css("display","none");
          $(".pob-bg").css("display","none");
        }
      })

      $(".hide-box2 .clone").click(function(){
        $(".hide-box2").css("display","none");
        $(".pob-bg").css("display","none");
        $('video').trigger('pause');
      });


      // 支教照片
      $(".tab-pic .swiper-slide").click(function(){
        if($(window).width()>768){
          $(".hide-box3").css("display","block");
          $(".pob-bg").css("display","block");}
        else{
          $(".hide-box3").css("display","none");
          $(".pob-bg").css("display","none");
        }
      })

      $(".hide-box3 .clone").click(function(){
        $(".hide-box3").css("display","none");
        $(".pob-bg").css("display","none");
      });

      $(".menu-nav").click(function(){
        $(".pob-bg").css("display","none");
        $(this).addClass("hide");
        $(".menu img").attr("src","/Public/color/img/menu.png");
      });


      $(".swiper-button-next").click(function(){
        $('video').trigger('pause');
      });

       $(".swiper-button-prev").click(function(){
        $('video').trigger('pause');
      });
    })

    var galleryTop = new Swiper('.gallery-top', {
      // loop:true,
      // loopedSlides: 6,
      spaceBetween: 10,
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      nextButton: '.swiper-button-next1',
      prevButton: '.swiper-button-prev1',
      spaceBetween: 10,
      centeredSlides: true,
      grabCursor: true,
      slidesPerView: 6,
      slideToClickedSlide: true,
      // nextButton: '.swiper-button-next1',
      // prevButton: '.swiper-button-prev1',
      // spaceBetween: 10,
      // slidesPerView: 6,
      // touchRatio: 0.2,
      // // loop:true,
      // loopedSlides: 6,
      // slideToClickedSlide: true
      onSlideChangeEnd: function(swiper){
        galleryTop2.slideTo(swiper.activeIndex, 1000, false);
        galleryThumbs2.slideTo(swiper.activeIndex, 1000, false);
      }
    });

    var galleryTop2 = new Swiper('.gallery-top2', {
      spaceBetween: 10,
    });
    var galleryThumbs2 = new Swiper('.gallery-thumbs2', {
      nextButton: '.swiper-button-next1',
      prevButton: '.swiper-button-prev1',
      spaceBetween: 10,
      centeredSlides: true,
      grabCursor: true,
      slidesPerView: 6,
      slideToClickedSlide: true
    });

    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;
    
    galleryTop2.params.control = galleryThumbs2;
    galleryThumbs2.params.control = galleryTop2;


    var galleryTop = new Swiper('.gallery-top3', {
      spaceBetween: 10,
    });
    var galleryThumbs = new Swiper('.gallery-thumbs3', {
      nextButton: '.swiper-button-next3',
      prevButton: '.swiper-button-prev3',
      spaceBetween: 10,
      centeredSlides: true,
      grabCursor: true,
      slidesPerView: 6,
      slideToClickedSlide: true
    });
    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;


    var galleryTop = new Swiper('.gallery-top4', {
      spaceBetween: 10,
    });
    var galleryThumbs = new Swiper('.gallery-thumbs4', {
      nextButton: '.swiper-button-next4',
      prevButton: '.swiper-button-prev4',
      spaceBetween: 10,
      centeredSlides: true,
      grabCursor: true,
      slidesPerView: 6,
      slideToClickedSlide: true
    });
    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;


    var swiper = new Swiper('.swiper-container-tab', {
      pagination: '.swiper-pagination',
      slidesPerView: 2,
      paginationClickable: true,
      spaceBetween: 30,
      autoplay: 3000,
      slidesPerGroup : 2,
      // slidesPerColumn: 2,
      paginationClickable: true,
      autoplayDisableOnInteraction: false,
      slidesPerColumn: 2,
      paginationClickable: true,
    });
  </script>


</body></html>